<template>
  <div :style="`width: ${wdith}`">

    <div
      class="auto-tips"
      :style="`width: ${num}%;line-height: ${height}`"
    >
      <slot name="autoTips"></slot>
    </div>

    <div
      class="progress-area"
      :style="`width: ${wdith};height: ${height}`"
    >
      <div
        class="progress-bg"
        :class="{ active }"
        :style="`width: ${num}%`"
        ref="bar"
      >
        &nbsp;<span
          v-if="showValue"
          v-text="typeof value === 'string' ? value : `${num}%`"
        ></span>&nbsp;&nbsp;
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Progressbar',
  props: {
    value: {
      type: [String, Number],
      default: '0%'
    },
    showValue: {
      type: Boolean,
      default: true
    },
    wdith: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '24px'
    },
    active: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    num () {
      return parseInt(this.value) || 0
    }
  }
}
</script>

<style scoped>
.progress-area {
  width: 100%;
  line-height: 24px;
  background: #f0f2f5;
  border-radius: 16px;
  overflow: hidden;
}
.auto-tips {
  text-align: right;
  white-space: nowrap;
  transition: width .8s;
}
.progress-bg {
  height: 100%;
  width: 0%;
  min-width: 24px;
  background-image: linear-gradient(135deg, #367ee8 0%, #3650e8 100%);
  border-radius: 16px;
  text-align: right;
  color: white;
  box-sizing: border-box;
  transition: width .8s;
  position: relative;
}
.progress-bg.active::before {
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 10px;
  animation: progress-active 2s ease-in-out infinite;
}
@keyframes progress-active {
  from { width: 0; opacity: 0.1; }
  to { width: 100%; opacity: 0; }
}
</style>
